<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 18:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>to do list</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" ><%--引入css文件--%>
    <script type="text/javascript" src="avalon/avalon.js"></script><%--引入js文件--%>
    <script type="text/javascript" src="js/avtodoList.js"></script>
</head>
<%--自定义HTML结构--%>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-5" ms-controller="todos"><%--avalon的v model匹配方法也就是vm的id--%>
                <form ms-on-submit="add"><%--事件以ms-on-submit方法进行绑定--%>
                    <div class="form-group">
                        <lable >将下面输入的文字放入todo list中！</lable><%--定义lable提示文字--%>
                        <input type="text" ms-duplex="txt" class="form-control" autocomplete="off" /><%--input用ms-duplex全双工的方法绑定，对应的就是vm中的txt变量--%>
                    </div>
                </form>
                <%--p装填条目宗总数--%>
                <p ms-if="todolist.size()>=0">现有{{todolist.size()}}项todo list</p><%--如果ms-if判断》0那么久显示p元素--%>
                <%--用ol来记录TODOlist列表，用ol的原因是ol是有序列表，
                当删除了一个元素后，元素的顺序还会重新计算--%>
                <ol >
                    <li ms-repeat="todolist"><%--vm中的todolist数组的遍历，数组中值的默认名字为el--%>
                        {{el}}
                        <a href="javascript:void(0);" ms-click="$remove" class="todoDelete">x</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    <%--<script src="js/todolist.js"></script>--%><%--//引入自定义的js文件--%>
</body>
</html>
